<template>
    <h1>我是 APP 组件</h1>

    <h1>  $store.state.数据名 </h1>
    <h4> {{ $store.state.num }} </h4>
    <h4> {{ $store.state.num2 }} </h4>
    <h4> {{ $store.state.num3 }} </h4>

    <!-- 3. 使用 辅助函数结构出来的数据 -->
    <h1> 通过 辅助函数 mapState 简化 </h1>
    <h4> {{ num }} </h4>
    <h4> {{ num3 }} </h4>
</template>

<script>
// 1. 导入 辅助函数
import { mapState } from 'vuex'

export default {
    data() {
        return {};
    },
    computed: {
        // 2. 使用辅助函数帮助我们将 vuex 中的数据 结构到 我们的计算属性中     ...mapState([XXX, YYY, ZZZ])
        ...mapState(['num', 'num3'])
    },

    mounted () {
        console.log(this.$store)
    }
};
</script>

<style></style>
